<template>
  <div>
    <div class="table-case">
      <MyTable :goods="goods">
        <template #head>
          <th>图片</th>
          <th>编号</th>
          <th>名称</th>
          <th width="100px">标签</th>
        </template>
        <template #body="scop">
          <td>
            <img :src="scop.row.picture" />
          </td>
          <td>{{ scop.row.id }}</td>
          <td>{{ scop.row.name }}</td>
          <td>
            <div class="my-tag">
              <MyTag v-model="scop.row.tag"></MyTag>
            </div>
          </td>
        </template>
      </MyTable>
    </div>

    <div id="app">
      <h2>测试题</h2>
      <MyMath
        v-for="(item, index) in mathlist"
        :key="index"
        :row="item"
        @dealresult="dealresult(item, $event)"
      ></MyMath>
      <div>
        <MyTip
          v-for="(item, index) in mathlist"
          :key="index"
          :row="item"
          :rowindex="index"
        ></MyTip>
      </div>
    </div>

    <div class="cart">
      <table border="1" width="700" style="border-collapse: collapse">
        <caption>
          购物车
        </caption>
        <thead>
          <tr>
            <th>
              <input type="checkbox" v-model="allcheck" /> <span>全选</span>
            </th>
            <th>名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>总价</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <MyCart
            v-for="(item, index) in goodList"
            :key="index"
            :row="item"
            @dealcheck="item.checked = $event"
            @dealdel="item.name === $event ? goodList.splice(index, 1) : ''"
            @dealnum="item.num = $event"
          ></MyCart>
        </tbody>
        <tfoot>
          <tr>
            <td>合计:</td>
            <td colspan="5">{{ goodsum }}</td>
          </tr>
        </tfoot>
      </table>
    </div>

    <div class="buy">
      <h4>商品清单如下：</h4>
      <div>
        <p v-for="(item, index) in foodList" :key="index">
          {{ item.shopName }}
        </p>
      </div>
      <h4>请输入购买数量：</h4>
      <BuyFood
        v-for="(item, index) in foodList"
        :key="index"
        :row="item"
        @dealnum="item.count = $event"
      ></BuyFood>
      <p>总计：{{ allprice }}</p>
    </div>

    <table class="sellout">
      <tr
        is="SellOut"
        v-for="(item, index) in goodsArr"
        :key="index"
        :row="item"
        @dealnum="item.count = +$event"
      ></tr>
      <tr>
        All Number:{{
          sum
        }}
      </tr>
    </table>

    <div class="mydog">
      <div class="left">
        <MyDog v-for="(item, index) in arr" :key="index" :row="item"
        @dealclick="arrlist.push($event)"></MyDog>
      </div>
      <div class="right">
        <ul>
          <li v-for="(item, index) in arrlist" :key="index">{{item}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import MyTable from "@/day6作业/MyTable.vue";
import MyTag from "@/day6作业/MyTag.vue";
import MyMath from "@/day6作业/MyMath.vue";
import MyTip from "@/day6作业/MyTip.vue";
import MyCart from "@/day6作业/MyCart.vue";
import BuyFood from "@/day6作业/BuyFood.vue";
import SellOut from "@/day6作业/SellOut.vue";
import MyDog from "@/day6作业/MyDog.vue";
export default {
  created() {
    for (let i = 0; i < 5; i++) {
      const left = Math.floor(Math.random() * 11);
      const right = Math.floor(Math.random() * 11);
      this.mathlist.push({ left, right, result: null });
    }
  },
  name: "App",
  components: {
    MyTable,
    MyTag,
    MyMath,
    MyTip,
    MyCart,
    BuyFood,
    SellOut,
    MyDog,
  },
  props: {},
  data() {
    return {
      mathlist: [],
      goods: [
        {
          id: 101,
          picture:
            "https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg",
          name: "梨皮朱泥三绝清代小品壶经典款紫砂壶",
          tag: "茶具",
        },
        {
          id: 102,
          picture:
            "https://yanxuan-item.nosdn.127.net/221317c85274a188174352474b859d7b.jpg",
          name: "全防水HABU旋钮牛皮户外徒步鞋山宁泰抗菌",
          tag: "男鞋",
        },
        {
          id: 103,
          picture:
            "https://yanxuan-item.nosdn.127.net/cd4b840751ef4f7505c85004f0bebcb5.png",
          name: "毛茸茸小熊出没，儿童羊羔绒背心73-90cm",
          tag: "儿童服饰",
        },
        {
          id: 104,
          picture:
            "https://yanxuan-item.nosdn.127.net/56eb25a38d7a630e76a608a9360eec6b.jpg",
          name: "基础百搭，儿童套头针织毛衣1-9岁",
          tag: "儿童服饰",
        },
      ],
      goodList: [
        {
          name: "诸葛亮",
          price: 1000,
          num: 1,
          checked: false,
        },
        {
          name: "蔡文姬",
          price: 1500,
          num: 1,
          checked: false,
        },
        {
          name: "妲己",
          price: 2000,
          num: 1,
          checked: false,
        },
        {
          name: "鲁班",
          price: 2200,
          num: 1,
          checked: false,
        },
      ],
      foodList: [
        {
          shopName: "可比克薯片",
          price: 5.5,
          count: 0,
        },
        {
          shopName: "草莓酱",
          price: 3.5,
          count: 0,
        },
        {
          shopName: "红烧肉",
          price: 55,
          count: 0,
        },
        {
          shopName: "方便面",
          price: 12,
          count: 0,
        },
      ],
      goodsArr: [
        {
          count: 0,
          goodsName: "Watermelon",
        },
        {
          count: 0,
          goodsName: "Banana",
        },
        {
          count: 0,
          goodsName: "Orange",
        },
        {
          count: 0,
          goodsName: "Pineapple",
        },
        {
          count: 0,
          goodsName: "Strawberry",
        },
      ],
      arr: [
        {
          dogImgUrl:
            "https://scpic.chinaz.net/files/pic/pic9/202003/zzpic23514.jpg",
          dogName: "博美",
        },
        {
          dogImgUrl:
            "https://scpic.chinaz.net/files/pic/pic9/202003/zzpic23514.jpg",
          dogName: "泰迪",
        },
        {
          dogImgUrl:
            "https://scpic.chinaz.net/files/pic/pic9/202003/zzpic23514.jpg",
          dogName: "金毛",
        },
        {
          dogImgUrl:
            "https://pic1.zhimg.com/80/v2-7ba4342e6fedb9c5f3726eb0888867da_1440w.jpg?source=1940ef5c",
          dogName: "哈士奇",
        },
        {
          dogImgUrl:
             "https://pic1.zhimg.com/80/v2-7ba4342e6fedb9c5f3726eb0888867da_1440w.jpg?source=1940ef5c",
          dogName: "阿拉斯加",
        },
        {
          dogImgUrl:
            "https://pic1.zhimg.com/80/v2-7ba4342e6fedb9c5f3726eb0888867da_1440w.jpg?source=1940ef5c",
          dogName: "萨摩耶",
        },
      ],
      arrlist:[]
    };
  },
  computed: {
    goodsum() {
      return this.goodList
        .filter((item) => item.checked === true)
        .reduce((sum, item) => sum + item.num * item.price, 0);
    },
    allcheck: {
      get() {
        return this.goodList.every((item) => item.checked === true);
      },
      set(value) {
        this.goodList.forEach((item) => (item.checked = value));
      },
    },
    allprice() {
      return this.foodList.reduce(
        (sum, item) => sum + item.count * item.price,
        0
      );
    },
    sum() {
      return this.goodsArr.reduce((sum, item) => sum + item.count, 0);
    },
  },
  watch: {},
  methods: {
    dealresult(item, $event) {
      item.result = $event;
    },
  },
};
</script>

<style lang="less" scoped>
.table-case {
  width: 1000px;
  margin: 50px auto;
  img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    vertical-align: middle;
  }
}

.my-table {
  width: 100%;
  border-spacing: 0;
  img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    vertical-align: middle;
  }
  th {
    background: #f5f5f5;
    border-bottom: 2px solid #069;
  }
  td {
    border-bottom: 1px dashed #ccc;
  }
  td,
  th {
    text-align: center;
    padding: 10px;
    transition: all 0.5s;
    &.red {
      color: red;
    }
  }
  .none {
    height: 100px;
    line-height: 100px;
    color: #999;
  }
}

.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}

#app {
  background-color: #fff;
  width: 500px;
  margin: 50px auto;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  padding: 2em;
}

.cart {
  margin: 20px;
}
.buy {
  border: 1px solid #ccc;
  width: 300px;
  height: 500px;
  padding: 20px;
  margin: 0 20px;
}

.mydog{
  width: 800px;
  height: 600px;
  .left{
    float: left;
    width: 700px;
  height: 600px;
  }
  .rigth{
    float: left;
    width: 100px;
  height: 600px;
  }
}
</style>
